<!DOCTYPE html>
<!--[if IE 9]>         <html class="no-js lt-ie10" lang="en"> <![endif]-->
<!--[if gt IE 9]><!-->
<html class="no-js" lang="en"> <!--<![endif]-->
<head>
         <#include "../static/top.ftl" >

</head>
<body>
<!-- Page Wrapper -->
<!-- In the PHP version you can set the following options from inc/config file -->
<!--
    Available classes:

    'page-loading'      enables page preloader
-->
<div id="page-wrapper">
    <!-- Preloader -->
    <!-- Preloader functionality (initialized in js/app.js) - pageLoading() -->
    <!-- Used only if page preloader is enabled from inc/config (PHP version) or the class 'page-loading' is added in #page-wrapper element (HTML version) -->
    <div class="preloader themed-background">
        <h1 class="push-top-bottom text-light text-center"><strong>Pro</strong>UI</h1>
        <div class="inner">
            <h3 class="text-light visible-lt-ie10"><strong>Loading..</strong></h3>
            <div class="preloader-spinner hidden-lt-ie10"></div>
        </div>
    </div>

    <div id="page-container" class="sidebar-partial sidebar-visible-lg sidebar-no-animations">
               

                 <#include "../static/menu.ftl" >

        <!-- Main Container -->
        <div id="main-container">
                   
                    
                    
                    
                    <#include "../static/header.ftl" >

            <!-- END Header -->

            <!-- Page content -->
            <div id="page-content">


                <div class="content-header">
                    <h4 style="padding-left: 20px;  padding-right: 20px;">
                        Dashboard&nbsp;&nbsp;&nbsp;<#include "../static/search.ftl" ></h4>
                </div>

                <ul class="breadcrumb breadcrumb-top">
                    <li>Home</li>
                    <li><a href="#">Recent News</a></li>
                </ul>


                <!-- END Dashboard Header -->


                <div class="row">

                    <div class="block">
                        <!-- Block Title -->
                        <div class="block-title">
                            <h2><strong>Recent</strong> News</h2>

                        </div>
                        <!-- END Block Title -->

                        <div class="block-content">
                            <table class="table table-vcenter table-striped">
                                <thead>
                                <tr>
                                    <th class="text-center"><i class="fa fa-file-picture-o fa-fw"></i></th>
                                    <th>Title</th>
                                    <th style="min-width:90px">Date</th>


                                </tr>
                                </thead>
                                <tbody id="news">

                                </tbody>
                            </table>
                            <div class="col-md-12">
                                <ul class="pagination" id="Pagination">

                                </ul>
                            </div>
                        </div>

                    </div>
                </div>




                <!-- END Page Content -->
            </div>
            <!-- Footer -->
            <#include "../static/corp.ftl" >
            <!-- END Footer -->

            <!-- END Main Container -->
        </div>
        <!-- END Page Container -->
    </div>

    <a href="#" id="to-top"><i class="fa fa-angle-double-up"></i></a>

     
         <#include "../static/footer.ftl" >
    <script type="text/javascript" src="/res1/js/jquery.pulsate.min.js"></script>
    <script>
        $(".sidebar-nav a").each(function () {
            $(this).removeClass('active');
        });
        $('#menu4').addClass('active');

        var pageSize = 10;
        $(document).ready(function () {
            queryList(1, true);


        });

        function queryList(page, pageinit) {
            $("#news").empty();


            $.get("/data/news/getNewsList", {"pageNum": page, "pageSize": pageSize}, function (data) {
                var contain, content = "";
                var _totalPage = data.maxPage;
                if (data.data.length) {
                    for (var i = 0; i < data.data.length; i++) {
                        contain = data.data[i];
                        content += "<tr> <td> <img style='height:80px; width:100px'  src='/res1/image/" + contain.local_img + "'  alt=''></td>";
                        content += " <td> <a href='" + contain.link + "'><h5>" + contain.title + "</h5></a></td>";
                        content += " <td> " + contain.pubdate + "</td>";


                    }
                    $("#news").append(content);
                }
                if (pageinit) {
                    $('#Pagination').empty();
                    $.jqPaginator('#Pagination', {
                        totalPages: _totalPage,
                        visiblePages: 3,
                        currentPage: 1,
                        prev: '<li class="prev"><a href="javascript:scroll(0,0)">Previous</a></li>',
                        next: '<li class="next"><a href="javascript:scroll(0,0)">Next</a></li>',
                        first: '<li class="first"><a href="javascript:scroll(0,0)">First</a></li>',
                        last: '<li class="last"><a href="javascript:scroll(0,0)">End</a></li>',
                        page: '<li class="page"><a href="javascript:scroll(0,0)">{{page}}</a></li>',
                        onPageChange: function (num, type) {
                            if ((this.currentPage != 1) || (1 != num)) {
                                queryList(num, false);
                            }
                        }
                    });
                }
            })

        }

    </script>
</body>
</html>